<template>
    <div class="container">
        <Breadcrumb :items="['menu.monitor', 'menu.monitor.device']" />
        <a-card :title="$t('menu.monitor.device')">
            <a-row>
                <a-col :offset="22"
                    >自动更新
                    <a-switch
                        v-model="isAutoUpdate"
                        @change="fnChangeAutoUpdate"
                /></a-col>
            </a-row>
            <!-- <a-divider /> -->
            <DeviceList ref="deviceListRef"></DeviceList>
        </a-card>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import DeviceList from './components/device-list.vue';

    const isAutoUpdate = ref('');
    const deviceListRef = ref(null);
    let intervalId: any;
    const fnChangeAutoUpdate = (value: any) => {
        if (value) {
            intervalId = setInterval(() => {
                const dd: any = deviceListRef.value;
                dd?.fnRefreshPage();
            }, 5000);
        } else {
            clearInterval(intervalId);
        }
    };
</script>

<style scoped lang="less">
    .container {
        padding: 0 20px 20px;

        :deep(.arco-list-content) {
            overflow-x: hidden;
        }

        :deep(.arco-card-meta-title) {
            font-size: 14px;
        }
    }

    :deep(.list-wrap) {
        // min-height: 140px;
        .list-row {
            align-items: stretch;

            .list-col {
                margin-bottom: 16px;
            }
        }

        :deep(.arco-space) {
            width: 100%;

            .arco-space-item {
                &:last-child {
                    flex: 1;
                }
            }
        }
    }
</style>
